import React, {Component} from 'react';
import {Grid,Button,Upload,Dialog,Icon} from '@icedesign/base';
import Img from '@icedesign/img';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { CropUpload } = Upload;
/**
*  设置头像
*/
export default class BaseUserHeadImg extends Component{
  constructor(props) {
     super(props);
     this.onSuccess = this.onSuccess.bind(this);
     this.state = {
       user:{
         head_img:"http://file.homeins.cn/Fke0qbx9Jsy3oSgrCTn4FiDLWPRf"
       }
     }
  }

  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.state.user = this.props.user;
    this.setState(this.state);
  }

  beforeCrop(file) {
    console.log("beforeCrop callback : ", file);

    // 返回 `false` 的方式
    if (file.size > 1024 * 1024 * 3) {
      Dialog.alert({
        content: "图片尺寸超过最大限制 3MB，请重新选择！",
        closable: false,
        title: "裁剪提醒"
      });
      return false;
    }

    // 返回 `promise` 的方式
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const img = new Image();
        img.onload = () => {
          if (img.width <= 1200) {
            resolve();
          } else {
            Dialog.alert({
              content: `图片宽度为${
                img.width
              }px, 超过最大限制 1200px，请重新选择！`,
              closable: false,
              title: "裁剪提醒"
            });
            reject(); // resolve(false) 也能阻断流程
          }
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    });
  }

  onCrop(dataUrl) {
    console.log("onCrop callback : ", dataUrl);
  }

  beforeUpload(file) {
    console.log("beforeUpload callback : ", file);
  }

  onChange(file) {
    console.log("onChange callback : ", file);
  }

  onSuccess(res, dataUrl) {
    console.log("onSuccess callback : ", res);
    this.refs.targetViewer.src = dataUrl;
    console.log(dataUrl);
    API.userUploadImg({"head_img":dataUrl}).then((res) => {
      console.log(res);
    });
  }

  render(){
    return(
      <div className="base-user-info-main" >
        <CropUpload
          action="https://www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload" // https://www.easy-mock.com/mock/5b960dce7db69152d06475bc/ice/upload 该接口仅作测试使用，业务请勿使用
          preview
          previewList={[80, 60, 40]}
          minCropBoxSize={100}
          beforeCrop={this.beforeCrop}
          onCrop={this.onCrop}
          beforeUpload={this.beforeUpload}
          onChange={this.onChange}
          onSuccess={this.onSuccess}
        >
        {/* CropUpload 内嵌的标签会成为呼出系统弹窗的 trigger */}
        <div >
          <img
            ref="targetViewer"
            src={this.state.user.head_img}
            width="120px"
            height="120px"
            style={{
              borderRadius:120
            }}
          />
        </div>
        <Button type="primary" style={{ marginLeft: 8,marginTop:10 }}>
          <Icon type="share" />上传头像
        </Button>
        {/* trigger end */}
      </CropUpload>
      </div>
    )
  }

}
